import React, { Component } from 'react'
import {inject, observer} from 'mobx-react'

@inject('appStore')
@observer

class AppleList extends Component {
  constructor(props){
    super(props)
  }
  render() {
    const { pickableList, eatApple, isPicking, pickApple, buttonText } = this.props.appStore
    const content = []
    if (pickableList.length){
      pickableList.map((apple, index) => {
        if (!apple.isEaten) {
          content.push(
            <div className="appleItem" key={ apple.id }>
              <div className="apple">
                <img src={require('../images/apple.png')} alt="" />
              </div>
              <div className="info">
                <div className="name">红苹果 - {apple.id}号</div>
                <div className="weight">{apple.weight}克</div>
              </div>
              <div className="btn-div">
                <button onClick={() => eatApple(apple.id)}> 吃掉 </button>
              </div>
            </div>
          )
        }
      })
    }
    if (!content.length) {
      content.push(<div className='empty' key="empty">苹果篮子空空如也</div>)
    }
    return(
      <div>
        <div className="appleList">
          {content}
        </div>
        <div className="pick-dev">
          <button  className={isPicking ? 'disabled' : '', 'pick-btn'}  onClick={() => pickApple() } >{buttonText}</button>
        </div>
      </div>
    )
  }
}

export default AppleList
